<!--
 * @Author: wangshuguang
 * @Date: 2022-02-17 10:49:37
 * @LastEditTime: 2022-04-15 13:32:36
 * @LastEditors: wangshuguang
 * @Description:  交易概览
-->
<template>
	<div class="PayView">
		<!-- 筛选条件 -->
		<el-card>
			<el-form ref="filterForm" :model="listQuery" class="demo-form-inline" label-width="100px">
				<el-row>
					<el-col :span="24" prop="date">
						<el-form-item label="时间">
							<el-radio-group v-model="filterDate" size="small" @change="dataRadioChange">
								<el-radio-button label="today">今天</el-radio-button>
								<el-radio-button label="yesterday">昨天</el-radio-button>
								<el-radio-button label="week">近7天</el-radio-button>
								<el-radio-button label="fifteen">近15天</el-radio-button>
								<el-radio-button label="thirty">近30天</el-radio-button>
								<el-radio-button label="month">本月</el-radio-button>
							</el-radio-group>
							&nbsp;
							<!-- <el-date-picker
                v-model="filterTime"
                :clearable="false"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                :default-time="['00:00:00', '23:59:59']"
                size="small"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="pickerChange"
              /> -->
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</el-card>

		<!-- 数据看板 -->
		<div class="dataCard">
			<el-card>
				<div class="leftLine">
					总收入/元
					<PopoverLabel>包含所有用户使用微信/支付宝进行支付的交易，插件返佣</PopoverLabel>
				</div>
				<div class="money">{{ totalData.totAmt }}元</div>
				<div class="content">
					<div>
						较前一日
						<span class="ratio" :class="totalData.ratioStatus">
							<i :class="'el-icon-caret-' + totalData.ratioStatus" />
							{{ totalData.totAmtRatio }}
						</span>
					</div>
				</div>
			</el-card>
		</div>

		<!-- 折线图 柱状图 -->
		<el-card class="chartContent">
			<el-radio-group v-model="chartType" size="small">
				<el-radio-button label="line">折线图</el-radio-button>
				<el-radio-button label="bar">柱状图</el-radio-button>
			</el-radio-group>
			<div class="chartBox">
				<PayViewLine v-if="chartType == 'line'" :base-data="topChartData" />
				<PayViewBar v-else-if="chartType == 'bar'" :base-data="topChartData" />
			</div>
		</el-card>

		<!-- 底部业务占比 -->
		<el-card class="businessContent">
			<div class="leftLine">各业务收入占比</div>
			<div class="businessBox">
				<div class="left"><PayViewCir :base-data="tableData" /></div>
				<div class="right">
					<el-table :data="tableData" height="100%" style="width: 100%">
						<el-table-column prop="date" label="排序">
							<template slot-scope="scope">
								{{ scope.$index + 1 }}
							</template>
						</el-table-column>
						<el-table-column prop="name" label="类型" />
						<el-table-column prop="money">
							<template slot="header" slot-scope="scope">
								<div>收入金额/元</div>
								<div>(从大到小)</div>
							</template>
						</el-table-column>
					</el-table>
				</div>
			</div>
		</el-card>
	</div>
</template>

<script>
import { mapGetters } from 'vuex';
import PayViewLine from '@/components/Charts/PayViewLine.vue';
import PayViewCir from '@/components/Charts/PayViewCir.vue';
import PayViewBar from '@/components/Charts/PayViewBar.vue';
import PopoverLabel from '@/components/PopoverLabel/index.vue';
import { getFilterFormPastTime } from '@/utils/format';
import { dateFtt, removePropertyOfNull } from '@/utils';
import { qryDaySumTrade } from '@/api/payCenter';
export default {
	components: { PayViewLine, PayViewCir, PayViewBar, PopoverLabel },
	data() {
		return {
			chartType: 'line',
			filterDate: 'today',
			filterTime: [],
			topChartData: [],
			tableData: [],
			dataCard: {},
			totalData: {},
			listQuery: {
				beginDate: '',
				endDate: ''
			}
		};
	},
	computed: {
		...mapGetters(['userInfo'])
	},
	async mounted() {
		// 设置时间查询默认值
		this.filterDate = 'today';
		this.dataRadioChange('today');
	},
	methods: {
		pickerChange(val) {
			// 时间筛选条件切换
			console.log('pickerChange', val);
			this.listQuery.beginDate = val[0];
			this.listQuery.endDate = val[1];
			this.filterDate = '';
			this.fetchData();
		},
		async dataRadioChange(val) {
			// 时间tab切换
			// let dateArr = []
			// if (val == 'nowMonth') {
			//   dateArr = await getFilterFormPastTime('nowMonth')
			// } else {
			//   dateArr = await getFilterFormPastTime(val)
			// }
			// this.listQuery.beginDate = dateArr[0]
			this.listQuery.dateType = val;
			// this.listQuery.endDate = dateArr[1]
			// console.log('val', val, dateArr)
			this.filterTime = [];
			this.fetchData();
		},
		fetchData() {
			let { isAdmin, shopId } = this.userInfo;
			this.listQuery.shopId = isAdmin ? '' : shopId;
			qryDaySumTrade(removePropertyOfNull(this.listQuery)).then(res => {
				console.log('qryDaySumTrade', res);
				if (res.code === 0) {
					const _data = res.data;
					const { tradeSort, dayTrade } = _data;
					this.totalData = {
						..._data,
						ratioStatus: _data.totAmtRatio && _data.totAmtRatio.indexOf('-') > -1 ? 'bottom' : 'top'
					};
					console.log('res', res);
					this.tableData = tradeSort;
					this.topChartData = dayTrade;
				}
			});
		}
	}
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.labelText {
	color: rgb(115, 115, 115);
	font-size: 12px;
}
.leftLine {
	border-left: 3px solid #ffb72f;
	padding-left: 5px;
}
.businessContent {
	margin-top: 20px;
	.businessBox {
		display: flex;
		margin-top: 20px;
		> div {
			width: 50%;
			height: 500px;
		}
	}
}
.chartContent {
	.chartBox {
		height: 350px;
	}
}

.ratio {
	&.bottom {
		color: green;
	}
	&.top {
		color: #ff1a1a;
	}
}
.PayView {
	// background: #fff;
	border-radius: 5px;
	padding: 20px;
	.dataCard {
		display: flex;
		/deep/.el-card {
			margin: 10px 10px 10px 0;
			min-width: 200px;
			.el-card__body {
				padding: 10px 20px;
				.money {
					font-size: 20px;
					margin-top: 15px;
				}
				.content {
					margin-top: 15px;
					font-size: 12px;
				}
			}
		}
	}
	.dataList {
		background: #fff;
	}
}
</style>
